<template>
  <MainLayout>
    <section class="threeD-header">
      <div class="container">
        <div class="threeD-header-title">AnyRender成功故事</div>
        <div class="threeD-header-content">
          我们的在线3D平台正在帮助全球数百家公司提供沉浸式体验并优化其3D工作流程。
        </div>
      </div>
    </section>

    <section class="threeD-content">
      <div class="container">
        <div class="threeD-list">
          <div class="threeD-item" v-for="(item, index) in forumList" :key="item.title">
            <div class="threeD-item-inner">
              <img class="threeD-item-img" :src="`/images/resources/successCases/${index + 1}.jpg`" alt="" />
              <div class="threeD-item-title">{{ item.title }}</div>
              <div class="threeD-item-content">{{ item.content }}</div>
              <div class="threeD-item-btn">了解更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 充分发挥我们平台的潜力 -->
    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">充分发挥我们平台的潜力</div>
        <div class="threeD-description">
          如何知道AnyRender是高效团队合作的理想解决方案并用来简化我们的3D工作流程，同时每天提供互动内容。
        </div>
        <div class="find-btn">
          <div class="find-btn-txt">阅读AnyRender研究案例</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <div class="video-section">
          <img class="video-section-bg" src="/images/resources/successCases/video-bg.jpg" alt="" />
          <img class="video-section-video" src="/images/resources/successCases/video.jpg" alt="" />
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img
          class="img-section-img cursor"
          @click="jump('/business/contact')"
          src="/images/resources/successCases/12.jpg"
        />
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { ref } from "vue";

  const forumList = ref([
    {
      title: "Donbhma使用配置器来提高生产力和客户满意度",
      content: "Donbhma实施了3D配置器，以便能够向客户发送数字孪生，并优化内部流程，以实现准确的规划、定价和生产。",
    },
    {
      title: "维普增加了协作和客户保留的改善",
      content: "维普将AnyRender平台集成到他们的3D工作流程中，并在其网站上成功推出了3D配置器和增强现实预览。",
    },
    {
      title: "Ceflook展示了他们屡获殊荣的3D配置产品",
      content:
        "这家优质家具制造商使用AnyRender平台为他们的网站构建了一个身临其境的配置器。这一切都是由他们的产品设计师一个人完成的。",
    },
    {
      title: "Fiuer正在以身临其境的体验向新市场扩张",
      content: "优质家具的在线零售商，扩展到全球市场，并使用3D和AR提供出色的客户体验。",
    },
    {
      title: "中意科学家改进了他们向非技术受众展示的概念",
      content: "中意科学家博士后研究员为技术概念创建了互动演示文稿，获得了继续该项目的积极反馈。",
    },
    {
      title: "KTM使用互动功能发起了营销活动",
      content: "KTM选择AnyRender创建交互式摩托车配置器以启动完整的营销活动，并促进社区对关键市场的参与。",
    },
    {
      title: "Zerba看到了在全公司范围内实施矢量工作流程的潜力",
      content: "Zerba回顾了使用AnyRender为内部3D管道利用3D和AR功能以及B2B事件的演示工具的潜力。",
    },
    {
      title: "Memodis展示了零售和餐饮业的新可能性",
      content: "Memodis的交互式3D和AR展示为F2B市场开辟了新的可能性。该解决方案在活动中为当地零售商展示。",
    },
    {
      title: "Tudio与AnyRender合作提供新的3D可视化",
      content: "Tudio的客户通过选择3D可视化而不是传统摄影或视频，以及增强品牌认知，实现了大幅节省。",
    },
    {
      title: "Molab在内部和与客户一起缩短反馈回路",
      content: "Molab原型工作室专门为客户定制产品。从想法到最终演示，使用AnyRender可以让他们更快地交付，错误更少。",
    },
    {
      title: "Kritudio在网络和AR上展示了他们的3D艺术",
      content:
        "Kritudio在将数字雕像导入AnyRender后，能够毫不费力地制作网络嵌入。访问者无需安装任何应用程序即可使用增强现实。",
    },
  ]);
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .threeD-header {
    padding: $spacing-xxl 0;

    .container {
      .threeD-header-title {
        font-size: 70px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 10px;
      }
      .threeD-header-content {
        font-size: 16px;
        color: #585858;
        text-align: center;
      }

      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-header-title {
          font-size: 48px;
          letter-spacing: 6px;
        }
        .threeD-header-content {
          margin-top: 20px;
          font-size: 14px;
        }
      }
      @media (max-width: $breakpoint-mobile) {
        .threeD-header-title {
          font-size: 36px;
          letter-spacing: 4px;
        }
      }
    }
  }

  .threeD-content {
    padding: 25px 0 60px;
    .container {
      .threeD-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 24px;
        .threeD-item {
          width: calc(33.33% - 16px);
          border-radius: 14px;

          .threeD-item-inner {
            flex: 1 1 100%;
            width: 100%;
            height: 100%;
            .threeD-item-img {
              width: 100%;
              border-radius: 14px;
              object-fit: cover;
              margin-bottom: 20px;
            }
            .threeD-item-title {
              font-size: 36px;
              font-weight: 500;
              color: #000;
              margin-bottom: 30px;
            }
            .threeD-item-content {
              font-size: 16px;
              color: #585858;
              padding-bottom: 20px;
            }
            .threeD-item-btn {
              align-content: flex-end;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 10px 20px;
              font-size: 16px;
              width: fit-content;
              border: 1px solid #703ffa;
              color: #703ffa;
              border-radius: 10px;
              cursor: pointer;
              transition: all 0.3s;
              &:hover {
                background: #703ffa;
                color: #fff;
              }
            }
          }
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-list {
          gap: 30px 24px;
          .threeD-item {
            width: calc(50% - 16px);
            .threeD-item-inner {
              .threeD-item-title {
                margin-bottom: 20px;
                font-size: 24px;
              }
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-list {
          gap: 30px 10px;
          .threeD-item {
            width: 100%;
            padding: 8px;
            .threeD-item-inner {
              .threeD-item-title {
                margin-bottom: 20px;
                font-size: 22px;
              }
              .threeD-item-content {
                font-size: 14px;
              }
              .threeD-item-btn {
                padding: 6px 20px;
                font-size: 14px;
              }
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-list {
          gap: 10px;
          .threeD-item {
            .threeD-item-inner {
              .threeD-item-btn {
                padding: 6px 12px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
        &.cursor {
          cursor: pointer;
        }
      }
      .video-section {
        position: relative;
        width: 100%;
        padding: 20px 15px;
        border-radius: 20px;
        overflow: hidden;
        .video-section-bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .video-section-video {
          width: 100%;
          border-radius: 20px;
          overflow: hidden;
          object-fit: cover;
        }
      }
    }
  }

  .threeD-section {
    padding: 30px 0;
    color: #000;
    text-align: center;
    .container {
      .threeD-title {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 4px;
      }
      .threeD-description {
        width: 90%;
        margin: 20px auto;
        font-size: 16px;
        line-height: 24px;
        color: #585858;
      }
      .find-btn-txt {
        color: #703ffa;
        background-color: transparent;
        border: 1px solid #703ffa;
        &:hover {
          color: #fff;
          background-color: #703ffa;
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-title {
          font-size: 36px;
          letter-spacing: 3px;
        }
        .threeD-description {
          font-size: 16px;
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-title {
          font-size: 32px;
          letter-spacing: 2px;
        }

        .threeD-description {
          width: 100%;
          font-size: 16px;
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-title {
          font-size: 28px;
        }

        .threeD-description {
          font-size: 14px;
        }
      }
    }
  }
  .find-btn {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 8px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
      &:hover {
        color: #703ffa;
        background-color: transparent;
      }
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }
</style>
